<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div ng-controller="Ctrl">
		<label>用户名</label>
		<input type="text" ng-model="username" placeholder="请输入用户名" />
		<ul ng-show="username">
			<li ng-repeat="user in users">{{user.name}}</li>
		</ul>
	</div>

	<script src="./angular.js"></script>
	<script type="text/javascript">
		var module = angular.module("app", []);

		module.factory('myService', ['$http', function($http) {
			var doRequest = function(username) {
				return $http({
					method: "GET",
					url: "service.json"
				})
			};
			return {
				userList: function(username) {
					return doRequest(username, 'userList');
				}
			}
		}])

		module.controller("Ctrl", ['$scope','$timeout','myService',function($scope, $timeout, myService) {
			var timeout;
			$scope.$watch('username', function(newUsername) {
				if (newUsername) {
					if (timeout) {
						$timeout.cancel(timeout);
					}
					console.log(1)
					timeout = $timeout(function() {
						myService.userList(newUsername)
						.success(function(data, status) {
							$scope.users = data;
						})
					}, 350);
				}
			})
		}]);
	</script>
</body>
</html>